import React, { memo, useState, useEffect } from "react";
import { AskPopularWrapper } from "./style";
import { getMommentPopular } from "@/service/discover";
import { Route, Link, useHistory } from "react-router-dom";

export default memo(function AskPopular() {
  const [popularList, setpopularList] = useState([]);

  useEffect(() => {
    getMommentPopular().then((res) => {

      setpopularList(res.data);
    });
  }, []);
  // momentdetail
  return (
    <AskPopularWrapper>
      <div className="title">精选瞬间</div>
      <div className="popular-list">
        {popularList.slice(0, 6).map((item) => {
          return (
            <div className="p-list-item" key={item.id}>
              <Link to={`/momentdetail?id=${item.id}`} target='_blank'>
                <div className="content">{item.content}</div>
                <div className="like">
                  <div className="love">{item.love_num}赞</div>
                  <div className="hate">{item.comment_num}评论</div>
                </div>
              </Link>
            </div>
          );
        })}
      </div>
    </AskPopularWrapper>
  );
});
